{% extends "commons/layout.html" %}
{% block css %}
    <link rel="stylesheet" href="/css/product_detail.css">
{% endblock %}
{% block content %}
    <div class="wrapper">
        <!--选择商品区域开始-->
        <div class="select-product">
            <!--左侧商品图片展示区域开始-->
            <div class="select-product-left">
                <div class="view-logo">
                    <img id="view-logo" src="{{product.cover.split(',')[0]}}" alt=""/>
                </div>
                <div class="product-imgs">
                    {% for item in product.cover.split(",") %}
                        <img class="product-logo {{'active' if loop.first else ''}}" src="{{item}}" alt="">
                    {% endfor %}
                </div>
            </div>
            <!--左侧商品展示区域结束-->
            <div class="select-product-right">
                <p class="product-name">{{product.name}}</p>
                <p class="product-desc">{{product.description}}</p>
                <div class="xiaoliang-section">
                    <p>累计出售 <span>{{product.times}}件</span></p>
                    <p>满意度 <span>{{product.score}}分</span></p>
                </div>
                <div class="product-info">
                    <div class="product-info-group">
                        <div class="product-info-label">
                            生产数量
                        </div>
                        <div class="product-info-items">
                            {% for item in (product.discountsConfig | jsonParse) %}
                                {% if item.min and item.max %}
                                    <div class="product-info-item">{{item.min}}件 - {{item.max}}件</div>
                                {% elif item.min and not item.max %}
                                    <div class="product-info-item">{{item.min}}件以上</div>
                                {% elif not item.min and item.max %}
                                    <div class="product-info-item">{{item.max}}件以下</div>
                                {% endif %}
                            {% endfor %}
                        </div>
                    </div>
                    <div class="product-info-group">
                        <div class="product-info-label">
                            预计生产周期
                        </div>
                        <div class="product-info-items">
                            {% for item in product.discountsConfig | jsonParse %}
                                <div class="product-info-item product-info-item-block">  {{ item.cycle + "天" if item.cycle else "现货"}}</div>
                            {% endfor %}
                        </div>
                    </div>
                    <div class="product-info-group">
                        <div class="product-info-label">
                            折扣
                        </div>
                        <div class="product-info-items">
                            {% for item in product.discountsConfig | jsonParse %}
                                <div class="product-info-item">{{item.discount  |  formatDiscount}}</div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
                <div class="express-select">
                    <div class="express-select-label">物流</div>
                    <div class="express-select-info">
                        发货地{{product.fromCity}} 快递费{{product.unitFreight}}元/件 最低{{product.unitFreight * product.minCount}}元
                    </div>
                </div>
                <!-- <div class="type-group">
                    <div class="type type-left">发布询价</div>
                    <div class="type type-right">下单生产</div>
                </div> -->
                <div class="form">
                    <div class="form-tags">
                        {% if product.isTp %}
                            <div data-type="TP" class="tag">
                                贴牌
                                <span></span>
                            </div>
                        {% endif %}
                        {% if product.isPf %}
                            <div data-type="PF" class="tag">
                                批发
                                <span></span>
                            </div>
                        {% endif %}
                        <!--<div class="tag">-->
                            <!--打样-->
                        <!--</div>-->
                    </div>
                    <div class="form-contents">
                        <div class="form-content">
                            <!--<div class="form-group">-->
                                <!--<div class="form-label">-->
                                    <!--加工类型-->
                                <!--</div>-->
                                <!--<div class="form-control">-->
                                    <!--<input type="text">-->
                                <!--</div>-->
                            <!--</div>-->
                            <div class="form-group">
                                <div class="form-label">
                                    单价
                                </div>
                                <div class="form-control">
                                    <!-- <input readonly class="unit-price" type="text"> -->
                                    <span class="unit-price">00.00</span>
                                    <span>件 总价：<i class="total-price">0.00</i>元</span>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="form-label">
                                    数量
                                </div>
                                <div class="form-control">
                                    <input id="product-quantity" type="text">
                                    <span>件 {{product.minCount}}件起订</span>
                                    <span class="error-message">请输入数字！</span>
                                </div>
                            </div>
                            
                        </div>
                        <div class="form-btn-group">
                            <button class="shangqiao-btn form-btn form-btn-left">咨询客服</button>
                            <button id="submit" class="form-btn form-btn-right">立即下单</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--选择商品区域结束-->
        <div class="jiaoyi-type">
            <div class="jiaoyi-type-item">
                <p class="jiaoyi-type-title">支付方式</p>
                <p class="items">
                    <span>支付宝</span>
                    <span>网上银行</span>
                    <span>线下支付</span>
                </p>
            </div>
            <div class="jiaoyi-type-item">
                <p class="jiaoyi-type-title">交易支持</p>
                <p class="items">
                    <span>收费打样</span>
                    <span>担保交易</span>
                    <span>分期付款</span>
                </p>
            </div>
            <div class="jiaoyi-type-item">
                <p class="jiaoyi-type-title">实力保障服务</p>
                <p class="items">
                    <span>材质保障</span>
                    <span>交期保障</span>
                    <span>期货保障</span>
                </p>
            </div>
        </div>
        <div class="product-navbar">
            <div class="nav-item nav-item-active">
                详情信息
                <span></span>
            </div>
            <div class="nav-item">
                成交({{product.times}})
                <span></span>
            </div>
            <div class="nav-item">
                评价({{product.rateCount}})
                <span></span>
            </div>
            <div class="nav-item">
                加工说明
                <span></span>
            </div>
        </div>
        <div class="product-content">
            <div class="product-content-section active">
                {% if descs.length %}
                    <div class="product-info">
                        <div class="product-info-top">
                            {% for item in descs %}
                                <div class="product-info-group">
                                    {% for option in item %}
                                        <div class="product-info-item">
                                            <p class="label-text">{{option | getKey}}</p>
                                            <p class="value-text">{{option | getValue}}</p>
                                        </div>
                                    {% endfor %}
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                {% endif %}
                <div style="font-size: 0px;margin-top: 40px;">
                    {% for item in product.images.split(",") %}
                        <div style="text-align:center;">
                            <img src="{{item}}" style="width: 80%;">
                        </div>
                    {% endfor %}
                </div>
            </div>
            <div class="product-content-section">
                <table class="trade-section">
                    <thead>
                        <tr>
                            <th>采购商</th>
                            <th>加工类型</th>
                            <th>成交件数</th>
                            <th>成交时间</th>
                        </tr>
                    </thead>
                    <tbody id="recodes-list">
                        {% include "public/recode_list.html" %}
                    </tbody>
                </table>
                {% if orderRecode_list.length == 0 %}
                    <p class="empty-list">~ 暂无成交 ~</p>
                {% else %}
                    <div id="recode-pagination">
                        {% set page = recodePage %}
                        {% include "public/pagination.html" %} 
                    </div>
                {% endif %}
                
            </div>
            <div class="product-content-section">
                 <div class="pingjia-content">
                    <div class="pingjia-title">
                        <label>
                            <input type="radio" name=""> 全部
                        </label>
                        <label>
                            <input type="radio" name=""> 四星五星<span class="count">(13)</span>
                        </label>
                        <label>
                            <input type="radio" name=""> 三星<span class="count">(3)</span>
                        </label>
                        <label>
                            <input type="radio" name=""> 一星二星<span class="count">(0)</span>
                        </label>
                        <div class="pingjia-title-right">
                            <label for="">
                                <input type="checkbox" name=""> 有评价内容
                            </label>
                            <select>
                                <option>最近评价</option>
                            </select>
                        </div>
                    </div>
                    <div class="pingjia-list">
                        {% if rateList.length > 0 %}
                            <div id="rateList">
                                {% include "public/rate_list.html" %}
                            </div>
                            <div id="rate-pagination">
                                {% set page = retePage %}
                                {% include "public/pagination.html" %} 
                            </div>
                        {% else %}
                            <p class="empty-list">~ 暂无评价 ~</p>
                        {% endif %}
                    </div>
                </div>
            </div>
            <div class="product-content-section">
                <div class="description-section">
                    <p class="title">贴牌流程</p>
                    <div class="group">
                        <div class="item">
                            <div class="item-index">1</div>
                            <p>下单</p>
                            <div class="line"></div>
                        </div>
                        <div class="item">
                            <div class="item-index">2</div>
                            <p>支付</p>
                            <div class="line"></div>
                        </div>
                        <div class="item">
                            <div class="item-index">3</div>
                            <p>邮寄样品</p>
                            <div class="line"></div>
                        </div>
                        <div class="item">
                            <div class="item-index">4</div>
                            <p>确认样品合格</p>
                            <div class="line"></div>
                        </div>
                        <div class="item">
                            <div class="item-index">5</div>
                            <p>邮寄全部货品</p>
                            <div class="line"></div>
                        </div>
                    </div>
                </div>
                <div class="description-section">
                    <p class="title">批发流程</p>
                    <div class="group">
                        <div class="item">
                            <div class="item-index">1</div>
                            <p>下单</p>
                            <div class="line"></div>
                        </div>
                        <div class="item">
                            <div class="item-index">2</div>
                            <p>支付</p>
                            <div class="line"></div>
                        </div>
                        <div class="item">
                            <div class="item-index">3</div>
                            <p>邮寄样品</p>
                            <div class="line"></div>
                        </div>
                    </div>
                </div>
                <div class="description-section description-section-plus">
                    <p class="title">代理 丨一件代发流程</p>
                    <div class="group">
                        <div class="item">
                            <div class="item-index">1</div>
                            <p>申请成为代理</p>
                            <div class="line"></div>
                        </div>
                        <div class="item">
                            <div class="item-index">2</div>
                            <p>审批通过</p>
                            <div class="line"></div>
                        </div>
                        <div class="item">
                            <div class="item-index">3</div>
                            <p class="two-line">
                                在自己的渠道<br/>
                                出售平台商品
                            </p>
                            <div class="line"></div>
                        </div>
                        <div class="item">
                            <div class="item-index">4</div>
                            <p class="two-line">
                                按照代理价支付，<br/>
                                平台负责发货
                            </p>
                            <div class="line"></div>
                        </div>
                    </div>
                </div>
                <div class="description-section">
                    <p class="title">打样流程</p>
                    <div class="group">
                        <div class="item">
                            <div class="item-index">1</div>
                            <p>下单</p>
                            <div class="line"></div>
                        </div>
                        <div class="item">
                            <div class="item-index">2</div>
                            <p>支付</p>
                            <div class="line"></div>
                        </div>
                        <div class="item">
                            <div class="item-index">3</div>
                            <p>邮寄样品</p>
                            <div class="line"></div>
                        </div>
                        <div class="item">
                            <div class="item-index">4</div>
                            <p>确认样品合格</p>
                            <div class="line"></div>
                        </div>
                        <div class="item">
                            <div class="item-index">5</div>
                            <p>大批量订货</p>
                            <div class="line"></div>
                        </div>
                    </div>
                </div>
                <div class="description-section description-section-plus">
                    <p class="title">定制流程</p>
                    <div class="group">
                        <div class="item">
                            <div class="item-index">1</div>
                            <p>发布加工需求</p>
                            <div class="line"></div>
                        </div>
                        <div class="item">
                            <div class="item-index">2</div>
                            <p>确认款式</p>
                            <div class="line"></div>
                        </div>
                        <div class="item">
                            <div class="item-index">3</div>
                            <p class="two-line">
                                支付首款， <br/>
                                邮寄样品
                            </p>
                            <div class="line"></div>
                        </div>
                        <div class="item">
                            <div class="item-index">4</div>
                            <p class="two-line">确认样品合格，<br/>
                                支付尾款</p>
                            <div class="line"></div>
                        </div>
                        <div class="item">
                            <div class="item-index">5</div>
                            <p>邮寄全部货品</p>
                            <div class="line"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="section product-list">
            <div class="section-title">
                <p class="title-line"></p>
                <p class="title-name">更多推荐</p>
                <p class="title-line"></p>
            </div>
            <div class="section-content">
                {% for product in list %}
                    {% include "commons/product.html" %}
                {% endfor %}
            </div>
        </div>
    </div>
<script src="/vendor/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="/vendor/nunjucks/browser/nunjucks.min.js"></script>
<script src="/js/product_detail.js"></script>
{% include "commons/shangqiao.html" %}
{% endblock %}